<template>
	<view class="more-main" @touchmove.stop.prevent="handlePrevent">
		<scroll-view scroll-y="true" class="parts-main">
			<view class="part-wrapper">
				<view class="title">面积</view>
				<view class="options-wrapper">
					<view class="select-block" :class="selectedAreas[0] ? 'activeBlock' : ''"
						@tap="setAreaSection([0, 50], 1)">50m²以下
					</view>
					<view class="select-block" :class="selectedAreas[1] ? 'activeBlock' : ''"
						@tap="setAreaSection([50, 70], 2)">50-70m²
					</view>
					<view class="select-block" :class="selectedAreas[2] ? 'activeBlock' : ''"
						@tap="setAreaSection([70, 150], 3)">70-150m²
					</view>
					<view class="select-block" :class="selectedAreas[3] ? 'activeBlock' : ''"
						@tap="setAreaSection([150, -1], 4)">150m²以上
					</view>
				</view>
			</view>
			<view class="part-wrapper">
				<view class="title">朝向</view>
				<view class="options-wrapper" style="background-color: white; height: 15vw; flex-wrap: wrap">
					<view v-for="(direction, index) in directionData" :key="index" class="select-block"
						:class="selectedDirections[index] ? 'activeBlock' : ''" @tap="
              setActiveSelections(
                house_direction,
                index + 1,
                index + 1,
                selectedDirections
              )
            ">{{ direction }}
					</view>
				</view>
			</view>
			<view class="part-wrapper">
				<view class="title">楼层</view>
				<view class="options-wrapper">
					<view class="select-block" :class="selectedFloor[0] ? 'activeBlock' : ''"
						@tap="setActiveSelections(house_floor_type, 1, 1, selectedFloor)">低
					</view>
					<view class="select-block" :class="selectedFloor[1] ? 'activeBlock' : ''"
						@tap="setActiveSelections(house_floor_type, 2, 2, selectedFloor)">中
					</view>
					<view class="select-block" :class="selectedFloor[2] ? 'activeBlock' : ''"
						@tap="setActiveSelections(house_floor_type, 3, 3, selectedFloor)">高
					</view>
					<view style="background-color: white" class="placeholder-block"></view>
				</view>
			</view>
			<view class="part-wrapper">
				<view class="title">装修</view>
				<view class="options-wrapper">
					<view class="select-block" :class="selectedRenovation[0] ? 'activeBlock' : ''" @tap="
              setActiveSelections(house_renovation, 1, 1, selectedRenovation)
            ">毛胚
					</view>
					<view class="select-block" :class="selectedRenovation[1] ? 'activeBlock' : ''" @tap="
              setActiveSelections(house_renovation, 2, 2, selectedRenovation)
            ">简装
					</view>
					<view class="select-block" :class="selectedRenovation[2] ? 'activeBlock' : ''" @tap="
              setActiveSelections(house_renovation, 3, 3, selectedRenovation)
            ">精装
					</view>
					<view style="background-color: white" class="placeholder-block"></view>
				</view>
			</view>
			<view class="part-wrapper">
				<view class="title">楼龄</view>

				<view class="options-wrapper">
					<view class="select-block" :class="selectedBuildBirth[0] ? 'activeBlock' : ''" @tap="
              setActiveSelections(build_birth, [0, 5], 1, selectedBuildBirth)
            ">5年内
					</view>
					<view class="select-block" :class="selectedBuildBirth[1] ? 'activeBlock' : ''" @tap="
              setActiveSelections(build_birth, [5, 10], 2, selectedBuildBirth)
            ">5-10年
					</view>
					<view class="select-block" :class="selectedBuildBirth[2] ? 'activeBlock' : ''" @tap="
              setActiveSelections(build_birth, [10, 20], 3, selectedBuildBirth)
            ">10-20年
					</view>
					<view class="select-block" :class="selectedBuildBirth[3] ? 'activeBlock' : ''" @tap="
              setActiveSelections(build_birth, [20, -1], 4, selectedBuildBirth)
            ">20年以上
					</view>
				</view>
			</view>
			<view class="part-wrapper">
				<view class="title">电梯</view>
				<view class="options-wrapper">
					<view class="select-block active-effect" :class="{
              activeBlock: house_levator.length === 1 && house_levator[0] === 1,
            }" @tap="setElevator(1)">有电梯</view>
					<view class="select-block active-effect" :class="{
              activeBlock: house_levator.length === 1 && house_levator[0] === 0,
            }" @tap="setElevator(0)">无电梯</view>
					<view class="select-block placeholder-block"></view>
					<view class="select-block placeholder-block"></view>
				</view>
			</view>
		</scroll-view>
		<view class="buttons-wrapper">
			<button class="blue-wide-button grey-button button" @click="reset">
				重置
			</button>
			<button class="blue-wide-button button" @tap="confirm">确定</button>

			<!--			<view class="blue-wide-button"-->
			<!--						@tap="Submit">确定-->
			<!--			</view>-->
		</view>
	</view>
</template>

<script>
	import {
		removeValOf
	} from '../../util/funcs';
	import {
		SHORT_TOAST_DURATION,
		d_uniShowToast
	} from '../../util/misc';

	export default {
		data() {
			return {
				allowBoth: true, // 如果点了一个租或者售的按钮 allowBoth为false
				orientationIndex: 1,
				floorIndex: 1,
				renovationIndex: 1,
				house_area: [], // 二维数组
				selectedAreas: [false, false, false, false],

				// 朝向
				house_direction: [],
				selectedDirections: [false, false, false, false],
				directionData: ['东', '南', '西', '北', '东南', '东北', '西南', '西北'],
				// 楼层
				house_floor_type: [], //1低楼层 2中楼层 3高楼层
				selectedFloor: [false, false, false],

				// 装修
				house_renovation: [],
				selectedRenovation: [false, false, false],

				// 楼龄
				build_birth: [],
				selectedBuildBirth: [false, false, false, false],

				// 电梯
				house_levator: [0, 1], // 0 无电梯 1 有电梯, -1未设置, 两者都可
			};
		},
		methods: {
			handlePrevent() {},
			setAreaSection(selected, index) {
				if (!removeValOf(this.house_area, selected)) {
					this.house_area.push(selected);
					this.$set(this.selectedAreas, index - 1, true);
				} else {
					this.$set(this.selectedAreas, index - 1, false);
				}
			},
			// index, 数组从1 开始算,  下面这个方法是上一个方法的generalized 版本, 具有通用性,
			setActiveSelections(arr, selected, index, arr2) {
				if (!removeValOf(arr, selected)) {
					arr.push(selected);
					this.$set(arr2, index - 1, true);
				} else {
					this.$set(arr2, index - 1, false);
				}
			},

			orientationIndexGet(num) {
				this.orientationIndex = num;
			},

			renovationIndexGet(num) {
				this.renovationIndex = num;
			},

			setElevator(num) {
				// debugger;
				if (this.house_levator[0] === num && this.house_levator.length === 1) {
					this.house_levator = [0, 1];
				} else {
					this.house_levator = [num];
				}
			},
			reset() {
				Object.assign(this.$data, this.$options.data());
				d_uniShowToast({
					title: '重置成功',
					duration: SHORT_TOAST_DURATION,
				});
			},
			confirm() {
				let opt = {
					house_area: this.house_area,
					house_direction: this.house_direction,
					house_floor_type: this.house_floor_type,
					house_renovation: this.house_renovation,
					build_birth: this.build_birth,
					house_levator: this.house_levator,
				};
				console.log(opt);
				this.$emit('confirm', opt);
			},
		},
		props: ['changeOptionShow'],
	};
</script>

<style scoped lang="scss">
	@import '../../assets/styles/global';
	@import './common';

	.more-main {
		padding-top: 5px;
		@include borderBox;
		max-height: 142vw;
		background-color: white;
		display: flex;
		flex-direction: column;
		padding-left: 15px;
		padding-right: 15px;
		width: 100vw;

		.parts-main {
			max-height: 120vw;
			overflow: scroll;

			.part-wrapper {
				.title {
					height: 22px;
					font-size: 16px;
					letter-spacing: 0px;
					color: #323233;
					text-align: left;
					width: 100%;
					margin-bottom: 10px;
				}

				@include center;
				flex-direction: column;

				.options-wrapper {
					display: flex;
					flex-direction: row;

					width: 100%;
					justify-content: space-between;
					margin-bottom: 10px;

					.select-block {
						@include center;
						color: #3d444c;
						@include borderBox;
						width: 22vw;
						height: 7vw;
						border-radius: 1vw;
						border: solid 1px #ebedf0;
						font-size: 12px;
					}

					.activeBlock {
						border: solid 1px #004fbf;
						color: #004fbf;
					}

					.placeholder-block {
						width: 22vw;

						height: 7vw;

						border-radius: 1vw;

						border: none;
					}
				}
			}
		}

		.buttons-wrapper {
			height: 16vw;
			@include center;
			justify-content: space-between;
		}
	}
</style>
